<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>贝塞尔曲线</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
  var WIDTH = 500;
  var HEIGHT = 500;
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  canvas.width = WIDTH;
  canvas.height = HEIGHT;

  function test() {
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.bezierCurveTo(50, 10, 50, 100, 80, 100);
    ctx.bezierCurveTo(120, 100, 110, 20, 150, 20);

    // ctx.bezierCurveTo(x1,y1,x2,y2,x,y)
    // x平滑 β 平滑值 自变量 i
    // 起始点 x y ( x+β, y, xi-β, yi, xi, yi )
    ctx.stroke();
  }

  var data = [10, 80, 90, 320, 150, 96, 185, 260, 400, 375, 111];

  function ech(b) {
    ctx.beginPath();
    data.forEach(function (ele, i, arr) {
      var t = i * 50;
      var ly = arr[i - 1];
      if (i == 0) {
        ctx.moveTo(0, ele);
        ly = ele;
      }
      ctx.bezierCurveTo(t - b/2, ly, t - b, ele, t, ele);
      ctx.lineWidth = 6;
    });
    ctx.stroke();
  }

  ech(32);

</script>
</body>
</html>